<template>
  <div :style="{ width: props.width, height: props.height }">
    <el-date-picker
      :style="{ width: props.width, height: props.height }"
      v-model="states.value"
      :type="states.type"
      :placeholder="states.placeholder"
      :disabled="states.disabled"
      :clearable="states.clearable"
      :readonly="states.readonly"
      :size="states.size"
      :format="states.format"
      :value-format="states.valueFormat"
      :start-placeholder="states.startPlaceholder"
      :end-placeholder="states.endPlaceholder"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
// let options = ref<any[]>([]);
// watch(
//   () => props.responseData,
//   () => {
//     if (props.responseData) {
//       init();
//     }
//   },
//   {
//     deep: true,
//   }
// );
onMounted(() => {
  // if (props.responseData && props.responseData.length > 0) {
  //   options.value = props.responseData as any;
  // } else {
  //   options.value = props.models.data;
  // }
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

const handleChange = (value) => {
  console.log("value", value);
  let obj = {};
  if (states.value.type == "daterange") {
    if (value) {
      obj = {
        startDate: value[0],
        endDate: value[1],
      };
    }
  } else {
    obj = {
      value,
    };
  }
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, obj);
    }
  });
};

const init = () => {
  // options.value = props.responseData as any;
};
</script>

<style scoped lang="scss"></style>
